import React, { Component } from 'react'
import Header from '../../components/Header/header';
import { Button, Form, Input, Toast } from 'antd-mobile'

import '../register/register.less'
import orange_logo from "../../assets/img/pic_logo_orange.png";

import { reqlogin } from '../../request/api.js'

export default class login extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        password: "",
      }
    }
  }
  render() {
    return (
      <div className='firstbox'>
        <Header title="登录" register></Header>
        <img src={orange_logo} alt="" />

        <div>{JSON.stringify(this.state.user)}</div>
        <Form layout='horizontal'>
          <Form.Item label="手机号" name="username">
            <Input
              placeholder="请输入手机号"
              clearable
              onChange={(e) => { return this.changeUser(e, "phone") }}
            />
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              onChange={(e) => { return this.changeUser(e, "password") }}
            />
          </Form.Item>
        </Form>

        <div className="text-center">
          <Button color="primary" onClick={this.login}>登录</Button>
        </div>
      </div>
    )
  };
  changeUser(e, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: e,
      },
    });
  };
  //3.登录
  login = () => {
    reqlogin(this.state.user).then(res => {
      if (res.data.code === 200) {
        //登录成功
        //弹成功
        Toast.show({
          content: res.data.msg
        })
        // 存用户信息
        sessionStorage.setItem("isLogin", JSON.stringify(res.data.list))
        // 跳转到首页
        this.props.history.push("/index/home")
      }
    })
  }
}
